React Native 开发环境准备
一、环境准备
我的环境：
二、建立独立RN工程
1、初始化创建工程
npx react-native init RNApp --version 0.73.4 --skip-install 这个命令提示：
��️ The `init` command is deprecated.
E:\android\projects\RNDemo4>cd RNApp
- Switch to npx @react-native-community/cli init for the identical behavior.
- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started
Exiting...
提示命令过时了，执行调用 ：
npx @react-native-community/cli init RNApp --version 0.73.4 --skip-install
执行完显示：
现在目录结构如下：
2、进入RN工程目录，安装依赖
# 进入CLI自动生成的RN工程目录（内层RNApp）
cd E:/android/projects/RNDemo4/RNApp/RNApp
# 安装依赖（淘宝镜像加速）
npm install --registry=https://registry.npm.taobao.org
上面这个命令卡住了，清空缓存重试：
# 1. 进入内层RNApp目录（必选，确保路径正确）
cd E:/android/projects/RNDemo4/RNApp/RNApp
# 2. 清空npm缓存（--force强制清空）
npm cache clean --force
# 3. 重新安装（改用更稳定的镜像，同时限制网络超时）
npm install --registry=https://registry.npmmirror.com --timeout=600000
执行完验证是否安装成功：
或者看下面：
Ok. RN工程依赖安装成功。
三、新建安卓原生工程 （上面这个Metro服务启动成功的窗口先保持，不关闭）
最小sdk 我选29. jdk版本17.
libs.versions.toml 文件修改如下：
1[versions] 2agp = "8.2.0" 3kotlin = "1.9.20" 4coreKtx = "1.10.1" 5junit = "4.13.2" 6junitVersion = "1.1.5" 7espressoCore = "3.5.1" 8lifecycleRuntimeKtx = "2.6.1" 9 10[libraries] 11androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } 12junit = { group = "junit", name = "junit", version.ref = "junit" } 13androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" } 14androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" } 15androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" } 16 17[plugins] 18android-application = { id = "com.android.application", version.ref = "agp" } 19kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
模块级build.gradle修改为：
1plugins { 2 alias(libs.plugins.android.application) 3 alias(libs.plugins.kotlin.android) 4} 5 6android { 7 namespace 'com.example.androidapp' 8 compileSdk 34 9 10 // 引入本地libs（兜底，若Gradle依赖仍有问题） 11 repositories { 12 flatDir { 13 dirs 'libs' 14 } 15 } 16 17 defaultConfig { 18 applicationId "com.example.androidapp" 19 minSdk 29 20 targetSdk 34 21 versionCode 1 22 versionName "1.0" 23 24 testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 25 ndk { 26 abiFilters 'armeabi-v7a', 'x86', 'x86_64', 'arm64-v8a' 27 } 28 } 29 30 buildTypes { 31 release { 32 minifyEnabled false 33 proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 34 } 35 } 36 compileOptions { 37 sourceCompatibility JavaVersion.VERSION_17 38 targetCompatibility JavaVersion.VERSION_17 39 } 40 kotlinOptions { 41 jvmTarget = '17' 42 } 43 packaging { 44 resources { 45 excludes += ["META-INF/LICENSE.md", "META-INF/LICENSE-notice.md"] 46 } 47 } 48} 49 50dependencies { 51 // 原生基础依赖 52 implementation libs.androidx.core.ktx 53 implementation libs.androidx.lifecycle.runtime.ktx 54 testImplementation libs.junit 55 androidTestImplementation libs.androidx.junit 56 androidTestImplementation libs.androidx.espresso.core 57 58 // 🔴 核心修复：用react-android替代react-native（适配0.70+拆分版） 59 implementation "com.facebook.react:react-android:0.73.4" 60 implementation "com.facebook.react:hermes-android:0.73.4" // 可选，Hermes引擎 61 implementation "com.facebook.soloader:soloader:0.10.5" // RN必需 62}
项目根目录build.gradle文件内容：
1buildscript { 2 ext { 3 buildToolsVersion = "34.0.0" 4 minSdkVersion = 29 5 compileSdkVersion = 34 6 targetSdkVersion = 34 7 reactNativeVersion = "0.73.4" 8 } 9 repositories { 10 google() 11 mavenCentral() 12 maven { url "https://maven.aliyun.com/repository/central" } 13 } 14} 15 16plugins { 17 alias(libs.plugins.android.application) apply false 18 alias(libs.plugins.kotlin.android) apply false 19} 20 21allprojects { 22 repositories { 23 google() 24 mavenCentral() 25 maven { url "https://maven.aliyun.com/repository/public/" } 26 // RN官方Maven仓库（兜底） 27 maven { url "https://repo1.maven.org/maven2/" } 28 } 29} 30 31task clean(type: Delete) { 32 delete rootProject.buildDir 33}
settings.gradle内容如下：
1pluginManagement { 2 repositories { 3 google { 4 content { 5 includeGroupByRegex("com\\.android.*") 6 includeGroupByRegex("com\\.google.*") 7 includeGroupByRegex("androidx.*") 8 } 9 } 10 mavenCentral() 11 gradlePluginPortal() 12 // 1. 新增：添加阿里云镜像（解决插件下载慢/失败） 13 maven { url "https://maven.aliyun.com/repository/public/" } 14 } 15} 16dependencyResolutionManagement { 17 repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) 18 repositories { 19 google() 20 mavenCentral() 21 // 2. 新增：添加RN依赖的本地仓库路径（和根build.gradle的allprojects一致） 22 maven { url "E:/android/projects/RNDemo4/RNApp/RNApp/node_modules/react-native/android" } 23 maven { url "E:/android/projects/RNDemo4/RNApp/RNApp/node_modules/jsc-android/dist" } 24 // 新增：阿里云镜像（加速RN依赖下载） 25 maven { url "https://maven.aliyun.com/repository/public/" } 26 } 27} 28 29rootProject.name = "AndroidApp" 30include ':app' 31
gradle-wrapper.properties文件内容如下：
1#Tue Feb 17 21:48:50 CST 2026 2distributionBase=GRADLE_USER_HOME 3distributionPath=wrapper/dists 4#distributionSha256Sum=a17ddd85a26b6a7f5ddb71ff8b05fc5104c0202c6e64782429790c933686c806 5#distributionUrl=https\://services.gradle.org/distributions/gradle-9.1.0-bin.zip 6#distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip 7distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.5-bin.zip 8# ?????????SHA256??? 9distributionSha256Sum=9d926787066a081739e8200858338b4a69e837c3a821a33aca9db09dd4a41026 10networkTimeout=10000 11validateDistributionUrl=true 12zipStoreBase=GRADLE_USER_HOME 13zipStorePath=wrapper/dists 14
MainApplication代码如下：
1package com.example.androidapp 2 3import android.app.Application 4import com.facebook.react.ReactApplication // 保留接口 5import com.facebook.react.ReactNativeHost 6import com.facebook.react.ReactPackage 7import com.facebook.react.defaults.DefaultReactNativeHost 8import com.facebook.react.shell.MainReactPackage 9import com.facebook.soloader.SoLoader 10import java.util.ArrayList 11 12// 实现ReactApplication接口（匹配抽象属性定义） 13class MainApplication : Application(), ReactApplication { 14 // 🔴 核心修改：把方法改为接口要求的抽象属性（val） 15 override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) { 16 override fun getPackages(): List<ReactPackage> { 17 val packages = ArrayList<ReactPackage>() 18 packages.add(MainReactPackage()) // RN核心包 19 return packages 20 } 21 22 override fun getJSMainModuleName(): String { 23 return "index" 24 } 25 26 // 调试模式开启（直接返回true，避免BuildConfig问题） 27 override fun getUseDeveloperSupport(): Boolean { 28 return true 29 } 30 31 // 关闭新架构，避免额外依赖 32 override val isNewArchEnabled: Boolean 33 get() = false 34 override val isHermesEnabled: Boolean 35 get() = true 36 } 37 38 override fun onCreate() { 39 super.onCreate() 40 SoLoader.init(this, false) 41 } 42}
MainActiivty代码如下：
1package com.example.androidapp 2 3import com.facebook.react.ReactActivity 4import com.facebook.react.ReactActivityDelegate 5import com.facebook.react.defaults.DefaultReactActivityDelegate 6 7class MainActivity : ReactActivity() { 8 // 必须和RN工程package.json的name一致（RNApp） 9 override fun getMainComponentName(): String { 10 return "RNApp" 11 } 12 13 override fun createReactActivityDelegate(): ReactActivityDelegate { 14 return DefaultReactActivityDelegate(this, mainComponentName, false) 15 } 16}
AndroidManifest文件内容如下：
1<?xml version="1.0" encoding="utf-8"?> 2<manifest xmlns:android="http://schemas.android.com/apk/res/android"> 3 <uses-permission android:name="android.permission.INTERNET" /> 4 5 <application 6 android:name=".MainApplication" 7 android:allowBackup="true" 8 android:icon="@mipmap/ic_launcher" 9 android:label="@string/app_name" 10 android:roundIcon="@mipmap/ic_launcher_round" 11 android:supportsRtl="true" 12 android:theme="@style/AppTheme"> 13 <activity 14 android:name=".MainActivity" 15 android:exported="true" 16 android:launchMode="singleTask" 17 android:theme="@style/AppTheme"> 18 <intent-filter> 19 <action android:name="android.intent.action.MAIN" /> 20 <category android:name="android.intent.category.LAUNCHER" /> 21 </intent-filter> 22 </activity> 23 <activity 24 android:name="com.facebook.react.devsupport.DevSettingsActivity" 25 android:exported="false" /> 26 </application> 27</manifest>
styles.xml文件内容如下：
1<?xml version="1.0" encoding="utf-8"?> 2<resources> 3 <!-- 🔴 核心修改：自定义样式名改为AppTheme（唯一，不冲突） --> 4 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 5 <!-- 可选：自定义主题属性（比如背景色） --> 6 <item name="android:windowBackground">@android:color/white</item> 7 <item name="android:statusBarColor">@android:color/white</item> 8 </style> 9</resources>
然后同步成功。
四、安卓RN工程依赖
提示有一些漏洞，修复漏洞：
启动Metro服务：
adb reverse tcp:8081 tcp:8081
npx react-native start --port 8081
运行起来加载RN页面失败。尝试了各种方式失败，比如在RN页面摇一摇，设置调试的ip和端口号都没用，关闭防火墙都没用。
五、尝试离线bundle方案：
- 打包RN离线文件，在RN工程目录执行
cd /d E:\android\projects\RNDemo4\RNApp\RNApp
# 生成bundle和资源（仅依赖本地RN环境，无需下载Gradle）
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
发现创建了以下目录和文件：
但是assets文件夹没有生成。手动新建该目录。再重新执行命令生成bundle 文件：
cd /d E:\android\projects\RNDemo4\RNApp\RNApp
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
执行完后可以看到生成了bundle文件。
2、将该bundle文件复制到安卓原生工程的对应目录：
3、修改下MainApplication：
1package com.example.androidapp // 替换为你的实际包名 2 3import android.app.Application 4import com.facebook.react.ReactApplication 5import com.facebook.react.ReactNativeHost 6import com.facebook.react.ReactPackage 7import com.facebook.react.defaults.DefaultReactNativeHost 8import com.facebook.react.shell.MainReactPackage 9import com.facebook.soloader.SoLoader 10import java.util.ArrayList 11 12class MainApplication : Application(), ReactApplication { 13 // 恢复默认的ReactNativeHost写法，仅修正Bundle路径 14 override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) { 15 override fun getPackages(): List<ReactPackage> { 16 val packages = ArrayList<ReactPackage>() 17 packages.add(MainReactPackage()) 18 return packages 19 } 20 21 override fun getJSMainModuleName(): String { 22 return "index" 23 } 24 25 override fun getUseDeveloperSupport(): Boolean { 26 return true 27 } 28 29 override val isNewArchEnabled: Boolean 30 get() = false 31 override val isHermesEnabled: Boolean 32 get() = true 33 34 // 🔴 改用RN 0.73兼容的assets路径写法（核心修复） 35 override fun getBundleAssetName(): String { 36 return "index.android.bundle" 37 } 38 39 // 注释掉getJSBundleFile，改用getBundleAssetName 40 // override fun getJSBundleFile(): String { 41 // return "android_asset/index.android.bundle" 42 // } 43 } 44 45 override fun onCreate() { 46 super.onCreate() 47 SoLoader.init(this, false) 48 } 49}
4、运行安卓原生工程，显示页面：
ok. 显示的这个页面就是RN工程中的App.tsx这个页面。
《React Native 开发环境准备》 是转载文章，点击查看原文。